<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <h1>数据劫持</h1>
  </div>
</body>
<script>

  let vm = {
    _data: {
      name: "laowang",
      age: 22,
      sex: "男",
      subject: {
        math: 60,
        china: 70,
        emg: 99
      }
    }
  }


  function defineReactive(data, key) {

    //给vn身上添加属性
    Object.defineProperty(data, key, {
      get: function proxyGetter() {
        console.log("我们可以再这个里边收集依赖项放在dep数组中。。。。");
        //将vm_data中的数据 返回给vm 数据是在这里设置的
        return data._data[key]
        // return 5555
      },
      set: function proxySetter(newVal) {
        // newVal 改了的值
        console.log("通知所有的依赖项，重新去拿值，因为我更新了");
        data._data[key] = newVal;
        // console.log('newVal',newVal);
      }
    })

  }



  function observe(data) {
    for (let key of Object.keys(data)) {

      defineReactive(data, key)

    }
  }



  // let key of Object.keys(vm._data)
  // 遍历生成 key属性 是 对象的key



  observe(vm._data)

  console.log(vm);

</script>

</html>